<template>
	<!-- 商品详情 -->
	<view class="container">
		<!--header S -->
		<!-- <view class="tui-header-box" :style="{ height: height + 'px', background: 'rgba(255,255,255,' + opcity + ')' }">
			<view class="tui-header" :style="{ paddingTop: top + 'px', opacity: opcity }">商品详情</view>
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<view class="tui-icon-box" :style="{ backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')' }"
					@tap="pageBack">
					<tui-icon name="arrowleft" :size="30" :color="opcity >= 1 ? '#000' : '#fff'"></tui-icon>
				</view>

				<view class="tui-icon-box tui-icon-ml" :style="{backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')'}"
					@tap.stop="openMenu">
					<tui-icon name="more-fill" :size="20" :color="opcity >= 1 ? '#000' : '#fff'"></tui-icon>
					<tui-badge type="red" :scaleRatio="0.8" absolute top="0" right="-4rpx">5</tui-badge>
				</view>

			</view>
		</view> -->
		<!--header E -->

		<!--banner S -->
		<view class="tui-banner-swiper">
			<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true"
				:style="{ height: scrollH + 'px' }" @change="bannerChange">
				<block v-for="(item, index) in goodsInfo.images" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage">
						<image :src="item" class="tui-slide-image" :style="{ height: scrollH + 'px' }" />
					</swiper-item>
				</block>
			</swiper>
			<!-- <view class="tui-video__box" @tap.stop="play">
				<image src="https://www.thorui.cn/images/mall/img_video_3x.png" mode="widthFix"></image>
				<view>00′30″</view>
			</view> -->
			<view class="tui-banner-tag">
				<tui-tag padding="12rpx 18rpx" type="translucent" shape="circleLeft" :scaleMultiple="0.82" originRight>
					<!-- {{ bannerIndex + 1 }}/{{ goodsInfo.images.length || 0 }} -->
					{{ bannerIndex + 1 }}/{{ goodsInfo && goodsInfo.images ? goodsInfo.images.length : 0 }}
				</tui-tag>
			</view>
		</view>

		<!--banner E -->

		<!-- 简介 S -->
		<view class="detail-box yh-bgf yh-pd30 yh-pr">
			<view class="yh-fc333 yh-fz32 yh-fw600 yh-lh54">
				{{ goodsInfo.goods_name || ''}}
			</view>
			<view class="level_align yh-mt20">
				<view class="yh-red yh-mr30 yh-fz34">
					￥ {{ spGoodsInfo.form && spGoodsInfo.form.goods_price ? spGoodsInfo.form.goods_price :''}}
				</view>
				<view class="yh-tdlt yh-fc999">
					￥ {{ spGoodsInfo.form && spGoodsInfo.form.line_price ? spGoodsInfo.form.line_price : ''}}
				</view>
			</view>
			<view v-if="spGoodsInfo.integral" class="yh-mt20 yh-fc-orange">
				<text class="yh-border1 yh-mr20 zeng yh-br6">
					赠
				</text>
				{{ spGoodsInfo.integral }}积分
			</view>
		</view>
		<!-- 简介 E -->

		<view @click="showPopup()" class="level_align yh-bgf flex_between yh-h98 yh-ptb0lr30 yh-mt20 yh-fz30">
			<view class="">
				规格
			</view>
			<view class="level_align yh-fc999">
				{{spGoodsInfo.spec_sku_name || '请选择规格'}}
				<uni-icons type="arrowright" size="18" color="#999999"></uni-icons>
			</view>
		</view>
<!-- 
		<view class="level_align yh-bgf flex_between yh-h98 yh-ptb0lr30 yh-mt20 yh-fz30">
			<view class="">
				运费
			</view>
			<view class="level_align yh-fc999">
				{{ goodsInfo.ems == 0 ? '免运费' : (goodsInfo.ems || '') + '元' }}
			</view>
		</view> -->

		<view class="yh-ptb0lr30 yh-h98 level_align yh-fz36 tuwen yh-pr">
			<!-- <text class="tuwen-bg"></text> -->
			<text class="yh-pr yh-zi10">
				图文详情
			</text>
		</view>
		<view class="yh-pb100 yh-ptb0lr30">
			<jyf-parser :html="goodsInfo.content" :lazyLoad="true" ref="article"></jyf-parser>
		</view>


		<!--底部操作栏 S -->
		<view class="tui-operation">
			<view class="tui-operation-left tui-col-5">
				<view @click.stop="makePhoneCall(customService.app_custom_mobile)" class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150">
					<tui-icon name="kefu" :size="22" color="#0592FE"></tui-icon>
					<view class="tui-operation-text tui-scale-small">客服</view>
				</view>
				<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="handleCollect">
					<tui-icon name="like-fill" v-if="goodsInfo.is_link != 0" :size="22" color="#EFC309"></tui-icon>
					<tui-icon name="like" :size="22" v-else color="#EFC309"></tui-icon>
					<view class="tui-operation-text tui-scale-small">收藏</view>
				</view>
				<view @click="handCart" class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150">
					<tui-icon name="cart-fill" :size="22" color="#FF7800"></tui-icon>
					<view class="tui-operation-text tui-scale-small">购物车</view>
					<!-- <tui-badge type="red" absolute :scaleRatio="0.8" right="10rpx" top="-4rpx">9</tui-badge> -->
				</view>
			</view>
			<view class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4">
				<view class="tui-flex-1">
					<tui-button height="90rpx" :size="26" type="warning" @click="showPopup('car')">加入购物车</tui-button>
				</view>
				<view class="tui-flex-1">
					<tui-button height="90rpx" :size="26" type="danger" @click="showPopup('buy')">立即购买</tui-button>
				</view>
			</view>
		</view>

		<!--底部操作栏 E -->


		<!--底部选择层-->
		<tui-bottom-popup :show="popupShow" @close="hidePopup">
			<view class="tui-popup-box">
				<view class="level_align flex_between yh-pd30">
					<view class="yh-mr30 yh-pr" style="width: 220rpx;">
						<view class=" yh-zi10 yh-bcF5" style="top: 0rpx;" v-if="spGoodsInfo.form">
							<image class="tui-popup-img" :src="spGoodsInfo.form.imgshow" mode="aspectFill"></image>
						</view>
					</view>
					<view class="flex flex_column flex-1">
						<view class="yh-fc333 yh-fz32 yh-fw600 ellispsis2 yh-lh44">
							{{ goodsInfo.goods_name}}
						</view>
						<view class="level_align flex_between yh-mt20">
							<view class="flex_column">
								<view class="yh-red yh-mr30 yh-fz34">
									￥{{ spGoodsInfo.form && spGoodsInfo.form.goods_price ? spGoodsInfo.form.goods_price : 0}}
								</view>
								<view class="yh-tdlt yh-fc999">
									￥ {{ spGoodsInfo.form && spGoodsInfo.form.line_price ? spGoodsInfo.form.line_price : 0}}
								</view>
							</view>
							<view class="yh-fc999">
								库存： {{ spGoodsInfo.form && spGoodsInfo.form.stock_num ? spGoodsInfo.form.stock_num : 0}}
							</view>
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="tui-popup-scroll">
					<view class="tui-scrollview-box">
						<!-- 规格选择 S -->
						<view v-for="(item,index) in specData.spec_attr" :key="index" class="">
							<view class="tui-bold tui-attr-title">{{item.group_name}}</view>
							<view class="tui-attr-box">
								<view class="tui-attr-item" @click="selectSpId(index,it.item_id)"
									v-for="(it,ind) in item.spec_items" :key="ind"
									:class="{'tui-attr-active': select_sp_ids[index] === it.item_id}">{{it.spec_value}}
								</view>
							</view>
						</view>
						<!-- 规格选择 E -->


						<view class="tui-number-box tui-bold tui-attr-title">
							<view class="tui-attr-title">数量</view>
							<tui-numberbox :max="spGoodsInfo.form && spGoodsInfo.form.stock_num ? spGoodsInfo.form.stock_num : 0" :min="1" :value="value" @change="change"></tui-numberbox>
						</view>
					</view>
				</scroll-view>
				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
					<view class="tui-flex-1">
						<tui-button height="72rpx" :size="28" type="danger" @click="chooseSuccess">确定</tui-button>
					</view>
					<!-- <view class="tui-flex-1">
						<tui-button height="72rpx" :size="28" type="warning" shape="circle" @click="submit">立即购买</tui-button>
					</view> -->
				</view>
				<!-- <view class="tui-right">
					<tui-icon name="close-fill" color="#999" :size="20" @click="hidePopup"></tui-icon>
				</view> -->
			</view>
		</tui-bottom-popup>
		<!--底部选择层-->


	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,

				bannerIndex: 0,
				popupShow: false, // 规格弹框

				id: '', // 商品id
				customService: {},
				goodsInfo: {}, // 商品信息
				specData: {},

				select_sp_ids: [], // 选择的规格id集合，初始化时赋值为每个规格的第一项
				spGoodsInfo: {}, // 选择规格后的信息
				value: 1, // 购买数量
				handType: '', // 谁吊起的选择规格 
			};
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity);
		},
		onLoad: function(options) {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif

			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.width = obj.left || res.windowWidth;
						this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight +
							44;
						this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6;
						this.scrollH = res.windowWidth;
					}
				});
			}, 0);

			this.id = options.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {

			// 选择规格
			selectSpId(index, id) {
				// console.log(index,id);
				this.select_sp_ids[index] = id
				this.spToGoodsInfo()
			},
			// 根据选择的规格获取商品信息
			spToGoodsInfo() {
				let str = this.select_sp_ids.join('_')
				if (this.specData.spec_list && this.specData.spec_list.length) {
					this.specData.spec_list.forEach(item => {
						if (item.spec_sku_id === str) {
							return this.spGoodsInfo = item
						}
					})
				}
			},
			// 获取商品详情
			getDetail() {
				
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/goods/details', {goods_id: this.id}, uni.getStorageSync('token'), function(res) {
					if (res.code === 1) {
						_this.goodsInfo = res.data.detail
						_this.customService = res.data.customService
						_this.specData = res.data.specData
						if (!_this.select_sp_ids.length && res.data.specData && res.data.specData.spec_attr && res.data.specData.spec_attr.length) {
							let arr = []
							res.data.specData.spec_attr.forEach(item => {
								if (item.spec_items.length) {
									arr.push(item.spec_items[0].item_id)
								}
							})
							_this.select_sp_ids = arr
							_this.spToGoodsInfo()
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
				
		
			
			},
			// 选择完规格
			chooseSuccess() {
				if (this.spGoodsInfo.form.stock_num <=0) return uni.showToast({title:'库存不足',icon:'none'})
				if(this.handType == 'car') {
					this.handAddCard()
				} else if(this.handType == 'buy') {
					this.submit()
				} else {
					this.hidePopup()
				}
			},
			// 点击加入购物车 
			handAddCard() {
				if (!this.select_sp_ids.length) return uni.showToast({
					title: '请选择规格',
					icon: 'none'
				})
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post(this.$api.cartAdd, {
					goods_id: this.id,
					goods_num: this.value,
					goods_sku_id: this.spGoodsInfo.goods_spec_id
				}).then(res => {
					uni.hideLoading()
					if (res.code === 1) {
						this.getDetail()
						this.hidePopup()
						setTimeout(() => {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							})
						}, 200)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 点击收藏
			handleCollect() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post(this.$api.collectAdd, {
					goods_id: this.id,
					type: '1',
				}).then(res => {
					uni.hideLoading()
					if (res.code === 1) {
						this.getDetail()
						setTimeout(() => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}, 200)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 提交订单
			submit() {
				if (!this.select_sp_ids.length) return uni.showToast({
					title: '请选择规格',
					icon: 'none'
				})
				let obj = {
					id: this.id,
					title: this.goodsInfo.goods_name ,
					yunfei: this.goodsInfo.ems,
					value: this.value
				}
				uni.navigateTo({
					url: '/pages/home/submitOrder?goods=' + JSON.stringify(obj) + '&spIds=' + JSON.stringify(this.select_sp_ids) + '&spGoodsInfo=' + JSON.stringify(this.spGoodsInfo) + '&spec_attr=' + JSON.stringify(this.specData.spec_attr)
				})
			},
			// 轮播切换
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current;
			},

			// 打开规格弹框 
			showPopup: function(type) {
				this.popupShow = true;
				this.handType = type
			},
			// 关闭规格弹框
			hidePopup: function() {
				this.popupShow = false;
			},
			// 数量加减
			change: function(e) {
				this.value = e.value;
			},
			// 去购物车
			handCart() {
				uni.switchTab({
					url: '/pages/tabbar/cart'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.container {
		padding-bottom: 110rpx;
	}

	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;

		.tui-header-box {
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 995;
		}

		.tui-header {
			width: 100%;
			font-size: 18px;
			line-height: 18px;
			font-weight: 500;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tui-header-icon {
			position: fixed;
			top: 0;
			left: 10px;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			height: 32px;
			transform: translateZ(0);
			z-index: 9999;
		}

		.tui-header-icon .tui-badge {
			background: #e41f19 !important;
			position: absolute;
			right: -4px;
		}

		.tui-icon-ml {
			margin-left: 20rpx;
		}

		.tui-icon-box {
			position: relative;
			height: 20px !important;
			width: 20px !important;
			padding: 6px !important;

			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}

	.tui-banner-swiper {
		position: relative;

		.tui-video__box {
			width: 166rpx;
			height: 60rpx;
			position: absolute;
			left: 50%;
			bottom: 50rpx;
			transform: translateX(-50%);
			z-index: 2;
		}

		.tui-video__box image {
			width: 166rpx;
			height: 60rpx;
		}

		.tui-video__box view {
			width: 100%;
			height: 100%;
			font-size: 24rpx;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			padding-left: 66rpx;
			box-sizing: border-box;
		}

		.tui-banner-tag {
			position: absolute;
			color: #fff;
			bottom: 30rpx;
			right: 0;
		}

		.tui-slide-image {
			width: 100%;
			display: block;
		}
	}


	.detail-box {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-top: -20rpx;

		.zeng {
			border: 2rpx solid #FF780B;
			padding: 6rpx 10rpx;
			background: rgba(255, 120, 11, 0.16);
			color: #FF780B;
		}
	}

	.tuwen-bg {
		position: absolute;
		left: 30rpx;
		top: 44%;
		z-index: 1;
		width: 140rpx;
		height: 20rpx;
		background-color: #f35244;

	}

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-operation {
		width: 100%;
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-operation-left {
		display: flex;
		align-items: center;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}

	.tui-opacity {
		opacity: 0.5;
	}

	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 100rpx;
		padding: 0 12rpx;
		box-sizing: border-box;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
		padding: 6rpx;
	}

	/*底部操作栏*/

	/*底部选择弹层*/

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	/* .tui-popup-btn .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28rpx !important;
	} */

	/* .tui-icon-close {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	} */

	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 220rpx;
		width: 220rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: #ff201f;
		font-size: 36rpx;
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {
		height: 600rpx;
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		// border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-active::after {
		content: '';
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		// border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}

	/*底部选择弹层*/
</style>
